<template>
  <el-dialog
      v-model="gunDialogVisible"
      title="充电枪信息"
      width="50%"
  >
    <el-form :model="gunForm" label-width="100px">
      <el-form-item label="充电枪编号">
        <el-input v-model="gunForm.gunCode" />
      </el-form-item>
      <el-form-item label="充电枪类型">
        <el-input v-model="gunForm.gunType" />
      </el-form-item>
      <el-form-item label="充电枪名称">
        <el-input v-model="gunForm.gunName" />
      </el-form-item>
      <el-form-item label="输出功率 (kW)">
        <el-input-number v-model="gunForm.outputPower" :min="0" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="gunForm.remark" />
      </el-form-item>
      <el-form-item label="所属充电桩">
        <el-select v-model="gunForm.pileId">
          <el-option
              v-for="pile in chargingPiles"
              :key="pile.id"
              :label="pile.pileName"
              :value="pile.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="gunDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="onSaveGun">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { toRefs } from 'vue';
import { useGunForm } from '@/composables/useGunForm.js';

export default {
  name: 'GunForm',
  props: {
    chargingPiles: {
      type: Array,
      default: () => [],
    },
    chargingGuns: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    // 使用自定义的逻辑钩子
    const {
      gunDialogVisible,
      gunForm,
      isAddingGun,
      openGunDialog,
      saveGun,
      removeGun,
    } = useGunForm();

    // 保存充电枪
    const onSaveGun = () => {
      saveGun(props.chargingGuns, props.chargingPiles);
    };

    return {
      gunDialogVisible,
      gunForm,
      isAddingGun,
      openGunDialog,
      saveGun,
      removeGun,
      onSaveGun,
    };
  },
};
</script>
